<template>
  <div class="page-userinfo">
    <div class="header-title">账号信息</div>
    <div class="wrapper-content">
      <div class="base-title">基本资料</div>
      <ul>
        <li v-for="(item,index) in baseInfo" :key="index">
          <label>{{item.name}}：</label>
          <span class="ellipsis" :title="item.value">{{item.value}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      baseInfo: []
    };
  },
  methods: {},
  mounted () {
    let userInfo = JSON.parse(localStorage.userInfo);
    this.baseInfo = [
      {
        name: '用户账号',
        value: userInfo.login
      },
      {
        name: '用户昵称',
        value: userInfo.nickName
      },
      {
        name: '绑定手机',
        value: userInfo.phone
      },
      {
        name: '绑定邮箱',
        value: userInfo.email
      }
    ];
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.page-userinfo {
  .header-title {
    font-size: 24px;
    border-bottom: 2px solid #ddd;
    padding: 10px 0px 20px 50px;
  }

  .base-title {
    font-weight: bold;
    font-size: 18px;
    padding: 20px 0 20px 52px;
  }

  ul {
    li {
      label {
        width: 180px;
        display: inline-block;
        font-size: 16px;
        padding: 0 0 20px 52px;
        text-align: right;
        color: #42485b;
      }

      span {
        font-size: 18px;
        padding-left: 25px;
      }
      .ellipsis {
        max-width: 500px;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
</style>
